 <# 
 	include("/include/header.html",{}){}
  #>
<div>
	<h2>beetl模板Context Path = '${base}'</h2>
</div>


<div>
	<h2>用后端beetl模板获取: name=${obj.name}, age=${obj.age}</h2>
</div>
<div id="app">
	<h2>用前端vue框架获取: name={{ message.name }}, age={{ message.age }}</h2>
	<p :contenteditable="true"  @input="changeText($event)" v-html="message"></p>
	name:<input :class="message.name" v-model="message.name"/>
	age:<input v-model="message.age"/>
</div>
</body>
<script>
//全局Vue对象使用http 请求之前执行
Vue.http.interceptors.push(function(request, next) {
    // 请求发送前的处理逻辑
    console.log("请求发送前的处理逻辑..."+JSON.stringify(request));
    next(function(response) {//请求发送后的处理逻辑
        console.log("请求发送后的处理逻辑..."+JSON.stringify(response));
        // 根据请求的状态，response参数会返回给successCallback或errorCallback
        return response;
    })
})

//全局Vue对象使用http 
/*  Vue.http.get("${base}/beetl/vue/Vue/v2.5.11/", {}).then(function(res){
	console.log("全局get请求,"+JSON.stringify(res.body))
}, function(res){
	console.log(res.status)
}) 
  
Vue.http.post("${base}/beetl/vue", {name:"Vue",age:"v2.5.11"}).then(function(res){
	console.log("全局post请求,"+JSON.stringify(res.body))
}, function(res){
	console.log(res.status)
});  */


var app = new Vue({
  	el: '#app',
  	data: {
    	message: ''
  	},
  	methods: {
  		changeText(that){
            this.message = eval("("+that.target.innerHTML+")")
        },
		put() {
			this.$http.put("${base}/beetl/vue/Vue/v2.5.11/").then((res) =>{
				this.message = res.body;
				console.log("get请求,"+JSON.stringify(res.body));
			}, (res)=> {
				console.log(res.status)
			});
		},
		post() {
			 this.$http.post("${base}/beetl/vue", {name:"Vue",age:"v2.5.11"}).then((res)=> {
				 this.message = res.body;
				 console.log("post请求,"+JSON.stringify(res.body));
			}, (res)=> {
				console.log(res.status)
			}); 
		}
	},
	mounted() { //初始化
		this.put(); 
		//this.post(); 
	} 
})

</script>
</html>